<template>
  <view>
    <view class="font26 letter" style="background-color: #fff4dd; color: #ffad00; padding: 26rpx 38rpx">
      提交资料即可开始沟通，否则医生无法收到复诊请求。如有问题请联系客服{{ kefu }}
    </view>

    <view class="padding">
      <view class="bg-white radius20" style="padding: 34rpx">
        <view class="col-333 font30">就诊人：{{ info.patient_name }}（{{ info.patient_gender_text }} ·{{ info.patient_age }}岁）</view>
        <view class="flex align-center justify-between margin-top">
          <view class="flex align-center">
            <view class="radius14" style="border: solid 1rpx #e8e8e8; width: 100rpx; margin-right: 15rpx; padding: 9rpx 10rpx">
              <input v-model="height" type="number" style="text-align: center" />
            </view>
            cm
          </view>
          <view class="flex align-center">
            <view class="radius14" style="border: solid 1rpx #e8e8e8; width: 100rpx; margin-right: 15rpx; padding: 9rpx 10rpx">
              <input v-model="weight" type="number" style="text-align: center" />
            </view>
            kg
          </view>
          <view class="flex align-center">
            <view class="radius14" style="border: solid 1rpx #e8e8e8; width: 100rpx; margin-right: 15rpx; padding: 9rpx 10rpx">
              <input v-model="city" type="text" style="text-align: center" />
            </view>
            省
          </view>
        </view>
      </view>
      <!-- 信息 -->
      <view class="bg-white radius20 margin-top-sm">
        <view class="" style="border-bottom: solid 1rpx #eeeeee; padding: 34rpx">
          <view class="col-333">联系方式</view>
          <view class="flex align-center" style="margin-top: 32rpx">
            <input type="tel" v-model="phone" class="flex-sub" maxlength="11" placeholder="请输入手机号" placeholder-class="placestype" />
            <view class="font24 col-999">
              <text style="padding-right: 20rpx">*用户接听医生来电</text>
              |
              <!-- <text @click="util.urlTo('/pages/user/editipone')" style="color: #0087FE;padding-left: 20rpx;">修改</text> -->
            </view>
          </view>
        </view>
        <view class="" style="padding: 34rpx">
          <view class="">
            <view class="col-333">描述病情</view>
            <view class="margin-top" style="border: solid 1rpx #e8e8e8; border-radius: 12rpx; padding: 27rpx 26rpx">
              <textarea v-model="illness_one" name="" placeholder="请详细描述当前的病情与症状" placeholder-class="placestype col-999" id="" cols="30" rows="10"></textarea>
            </view>
          </view>
          <view class="" style="margin-top: 31rpx">
            <view class="col-333">过敏史</view>
            <view class="margin-top" style="border: solid 1rpx #e8e8e8; border-radius: 12rpx; padding: 27rpx 26rpx">
              <textarea v-model="illness_two" name="" placeholder="请详细描述过敏史，若无过敏请写“无”" placeholder-class="placestype col-999" id="" cols="30" rows="10"></textarea>
            </view>
          </view>
          <view class="" style="margin-top: 31rpx">
            <view class="col-333">既往病史</view>
            <view class="margin-top" style="border: solid 1rpx #e8e8e8; border-radius: 12rpx; padding: 27rpx 26rpx">
              <textarea
                v-model="illness_three"
                name=""
                placeholder="若曾有肝肾损伤，请在此填写，并告知一声"
                placeholder-class="placestype col-999"
                id=""
                cols="30"
                rows="10"
              ></textarea>
            </view>
          </view>
          <view class="" style="margin-top: 31rpx">
            <view class="col-333">
              其他资料
              <text class="col-999 font26">（选填）</text>
            </view>
            <view class="font24 col-999 margin-top-sm">如果有其他相关的检验报告或化验单，请上传突变，以便医生更准确地为您诊疗</view>
            <view class="margin-top-sm">
              <view class="grid col-3 grid-square flex-sub">
                <view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
                  <image :src="imgList[index]" mode="aspectFill"></image>
                  <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                    <text class="cuIcon-close"></text>
                  </view>
                </view>
                <view class="solids" @tap="ChooseImage" v-if="imgList.length < 4">
                  <text class="cuIcon-cameraadd"></text>
                </view>
              </view>
            </view>
          </view>
          <view class="flex justify-center align-center" style="margin-top: 34rpx; line-height: 39rpx">
            <radio :checked="radio" color="#0087FE" style="transform: scale(0.6)" @tap="radio = !radio"></radio>
            <view class="flex-sub font24 padding-left-xs letter col-999">
              <text class="" @tap="radio = !radio">点击发送即同意</text>
              <text style="color: #63b6ff" @click.stop="util.urlTo('/pages/user/detail?type=4')">《医生工作室预约知情同意书》</text>
              及
              <text style="color: #63b6ff" @click.stop="util.urlTo('/pages/user/detail?type=2')">《互联网诊疗风险告知及同意书》</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="flex align-center justify-center margin-top-lg margin-bottom-sm padding-bottom-sm">
      <view @click="submit" class="btnbg font30" style="width: 500rpx; height: 80rpx; background-color: #0087fe">下一步</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      orderid: '',
      height: '',
      weight: '',
      city: '',
      phone: '',
      illness_one: '',
      illness_two: '',
      illness_three: '',
      radio: false,
      imgList: [],
      kefu: '',
      info: {}
    };
  },
  onLoad(op) {
    console.log(op);
    op.id ? (this.id = op.id) : '';
    op.info ? (this.info = JSON.parse(op.info)) : '';
    op.orderid ? (this.orderid = op.orderid) : '';
    this.getUserInfo();
  },
  onShow() {
    this.getkefu();
  },
  methods: {
    getkefu() {
      this.util
        .request(
          '/common/about',
          {
            doctor_synopsis: this.content
          },
          'post'
        )
        .then((res) => {
          this.kefu = res.mobile;
        });
    },
    // getinfo(){
    // 	this.util.request('index/patientInfo',{
    // 		patient_id: this.id
    // 	},'post').then(res => {
    // 		// this.util.showMsg('提交成功', 2000, this.util.urlTo('Consultation'))
    // 		this.weight = res.patient_weight;
    // 		this.height = res.patient_height;
    // 		this.name = res.patient_name;
    // 		this.age = res.patient_age;
    // 		this.mobile = res.patient_mobile;
    // 		this.height = res.patient_height;
    // 	})
    // },
    getUserInfo() {
      this.util.getUserInfo().then((res) => {
        this.phone = res.mobile;
      });
    },
    ChooseImage() {
      uni.chooseImage({
        count: 4 - this.imgList.length, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: (res) => {
          if (this.imgList.length != 0) {
            this.imgList = this.imgList.concat(res.tempFilePaths);
          } else {
            this.imgList = res.tempFilePaths;
          }
        }
      });
    },
    ViewImage(e) {
      uni.previewImage({
        urls: this.imgList,
        current: e.currentTarget.dataset.url
      });
    },
    DelImg(e) {
      this.imgList.splice(e.currentTarget.dataset.index, 1);
    },
    submit() {
      // this.util.urlTo('Consultation')
      let imgs = [];
      if (!this.height) {
        this.util.showToast('请填写身高');
        return false;
      }
      if (!this.weight) {
        this.util.showToast('请填写体重');
        return false;
      }
      if (!this.city) {
        this.util.showToast('请填写城市');
        return false;
      }
      if (!this.util.checkPhone(this.phone)) {
        this.util.showToast('请输入正确的手机号');
        return false;
      }
      if (!this.illness_one) {
        this.util.showToast('请填写病史');
        return false;
      }
      if (!this.illness_two) {
        this.util.showToast('请填写过敏病史');
        return false;
      }
      if (!this.illness_three) {
        this.util.showToast('请填写过去病史');
        return false;
      }
      // if(this.imgList.length == 0){
      // 	this.util.showToast('请填写补充材料')
      // 	return false
      // }
      if (!this.radio) {
        this.util.showToast('请阅读并勾选同意书');
        return false;
      }
      if (this.imgList.length == 0) {
        this.writeServe();
      } else {
        for (let i = 0; i < this.imgList.length; i++) {
          this.util.upload(this.imgList[i]).then((res) => {
            imgs.push(res.url);
            if (imgs.length == this.imgList.length) {
              this.writeServe(imgs);
            }
          });
        }
      }
    },
    writeServe(e) {
      this.util
        .request(
          '/order/writeServe',
          {
            order_id: this.orderid,
            patient_height: this.height,
            patient_weight: this.weight,
            patient_city: this.city,
            patient_mobile: this.phone,
            illness_one: this.illness_one,
            illness_two: this.illness_two,
            illness_three: this.illness_three,
            illness_image: e ? e : ''
          },
          'post'
        )
        .then((res) => {
          // this.util.urlTo('Consultation')
          // this.util.showMsg('提交成功', 2000, uni.redirectTo({
          // 	url: 'Consultation?id='+ this.id
          // }))
          this.util.showToast('提交成功', true);
        });
    }
  }
};
</script>

<style>
page {
  background-color: #f8f8f8;
}
</style>
